<template>
  <div class="invited" :height="clientH">
    <div class="invited-bg">
      <img src="../../assets/bigbackground/bg_invistDetail.png" alt="邀请好友送红包">
    </div>
    <div class="invited-register">
      <register></register>
    </div>
    <div class="invited-subject">
      <ul>
        <li v-for="(subject, index) in subjects" @click.stop="AndroidOrIos(subject.borrowOrder)" :key="index">
          <good v-bind="subject"></good>
        </li>
      </ul>
    </div>
    <a href="#"><img :src="require('@/assets/botton1288_@3x.png')" alt="领取1288元红包" class="invited-btn"></a>
  </div>
</template>

<script>
  import register from 'components/register'
  import good from 'components/good'

  export default {
    data () {
      return {
        clientW: 0,
        clientH: 0,
        subjects: []
      }
    },
    created () {
      // 获取设备的宽度，根据设计稿比例动态计算页面的高度
      // clientH / clientW = 5418 / 1125
      this.clientW = document.documentElement.clientWidth
      this.clientH = (3612 / 750) * this.clientW

      this.$http.get(`/api/borrow/borrowInfo/list?currentPage=1&numPerPage=2`)
        .then((res) => {
          if (res.data.success) {
            this.subjects = res.data.data.list
            console.log(this.subjects)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    components: {
      register,
      good
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';
  .invited {
    position: relative;
    &-btn {
      position: absolute;
      bottom: 4.5%;
      width: 400px;
      height: 90px;
      left: 50%;
      transform: translateX(-50%);
    }
    &-bg {
      font-size: 0; // 清除空文本高度
      img {
        width: 100%;
      }
    }
    &-register {
      width: 92%;
      position: absolute;
      top: 13%;
      left: 50%;
      transform: translateX(-50%);
    }
    &-subject {
      width: 90%;
      position: absolute;
      bottom: 7.5%;
      left: 52%;
      transform: translateX(-50%);
      ul {
        width: 100%;
        li {
          border: 1px solid #ff9e28;
          margin-bottom: 20px;
        }
      }
    }
  }
</style>
